<template>
  <div class="app-container">
    <el-card>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="标题" prop="title">
          <el-input style="width: 500px" v-model="form.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <Tinymce  ref="tinymce" v-model="form.content" :height="600" />
        </el-form-item>
        <el-form-item label="发布平台：" prop="platformType">
          <el-checkbox-group v-model="form.platformType">
            <el-checkbox v-for="city in platformTypeList" :label="city.dictValue" :key="city.dictValue">{{
              city.dictLabel }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-button v-debounce :disabled="isDetail" type="primary" @click="onSubmit('form')">保存</el-button>
          <el-button @click="goBack">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import Tinymce from "@/components/Tinymce";
import { addToolLoans, getToolLoans, editToolLoans } from "@/api/tool";
export default {
  components: { Tinymce },
  data() {
    return {
      form: {
        title: "",
        content: "",
        platformType: ['2'],
        toolType: 'loan_questions'
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
        platformType: [
          { required: true, message: "请选择发布平台", trigger: "blur" },
        ],
      },
      platformTypeList: [],
      isDetail: false
    };
  },
  async created() {
    this.platformTypeList = await this.$getDictData("platform_type");
    if (this.$route.query.id) {
      this.$route.meta.title = "100问海报";
      this.getInfo();
    }
    if (this.$route.query.type == "detail") {

      this.$route.meta.title = "详情";
      this.isDetail = true;
      this.getInfo();
    }
  },
  methods: {
    getInfo() {
      getToolLoans(this.$route.query.id).then((res) => {
        res.data.platformType = res.data.platformType.split(",");
        this.$refs.tinymce.setContent(res.data.content);

        if(this.isDetail) {
          this.$refs.tinymce.setRead(true)
        }

        this.form = Object.assign({}, res.data);
      });
    },
    goBack() {
      this.$router.back();
    },
    onSubmit(form) {
      this.$refs[form].validate((valid) => {
        if (!valid) return;
        let data = Object.assign({}, this.form);
        data.platformType = data.platformType.join(",");
        if (this.form.id) {
          editToolLoans(data).then((res) => {
            this.$message({
              type: "success",
              message: "修改成功!",
            });
            setTimeout(() => {
              this.$router.back();
            }, 100);
          });
        } else {
          addToolLoans(data).then((res) => {
            this.$message({
              type: "success",
              message: "添加成功!",
            });
            this.$router.go(-1);
          });
        }
      });
    },
  },
};
</script>
